import React, { memo, useEffect, useRef} from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import {
  PlaySonglistWrapper,
  ContentWrapper,
  LeftSonglistWrapper,
  SongListWrapper,
  RightSonglistWrapper
} from './style'
import { formatTime } from '@/utils/format'
export default memo(function PlaySonglist(props) {
 
  const { changeIsShow} = props
  const { songList,currentSongIndex,songLyric,currentSongLyricIndex} = useSelector(state => ({
    songList: state.getIn(['player', 'songList']),
    currentSongIndex: state.getIn(['player', 'currentSongIndex']),
    songLyric: state.getIn(['player', 'songLyric']),
    currentSongLyricIndex:state.getIn(['player','currentSongLyricIndex'])
  }), shallowEqual)
  const lycRef = useRef()
  useEffect(() => {
    if (currentSongLyricIndex > 0 && currentSongLyricIndex < 3) return;
    lycRef.current.scrollTop = 32 * (currentSongLyricIndex - 3)
  },[lycRef,currentSongLyricIndex])

  return (
    <PlaySonglistWrapper>
      <ContentWrapper>
        <LeftSonglistWrapper>
          <div className="left-header">
            <div className='list_name'>播放列表({songList.length})</div>
            <div className='collect'>收藏全部</div>
            <div className='remove'>清除</div>
          </div>
          <div className='songlist'>
            {
              songList.map((item,index) => {
                return (
                  <SongListWrapper key={item.id} className='song_item' isActive={index === currentSongIndex}>
                    <div className='icon sprite_playlist'></div>
                    <div className='name'>{item.name}</div>
                    <div className='artist'>{item.ar[0].name}</div>
                    <div className='dt'>{formatTime(item.dt,'mm:ss') }</div>
                  </SongListWrapper>
                )
              })
            }
          </div>
        </LeftSonglistWrapper>
        <RightSonglistWrapper>
          <div className="right-header">
            <div className='song_name'>{songList[currentSongIndex].name}</div>
            <div className='close' onClick={changeIsShow}>×</div>
          </div>
          <div className='lyc_list' ref={lycRef}>
            {
              songLyric.map((item,index) => {
                return (
                  <div className={`lyc_item ${index === currentSongLyricIndex ? 'active' : ''}`}
                       key={item.id}>
                    {item.content}
                  </div>
                )
              })
            }
          </div>
        </RightSonglistWrapper>
      </ContentWrapper>
    </PlaySonglistWrapper>
  )
})
